<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>轮播图下方带圆点+数字+左右按钮</title>  
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>  
<link rel="stylesheet" href="轮播图.css">  
</head>  
<body>  
<section class="lump5">   
  <!--上面-->  
  <ul class="img">  
     <li><a href=""><img src="..\实验\images\l1.jpg" alt=""></a></li>
     <li><a href=""><img src="..\实验\images\l2.png" alt=""></a></li>
     <li><a href=""><img src="..\实验\images\l3.png" alt=""></a></li>
     <li><a href=""><img src="..\实验\images\l4.png" alt=""></a></li>

  </ul>  
  <!--下面-->  
  <ul class="num">  
  </ul>  
  <div class="left btn"><</div>  
  <div class="right btn">></div>  
</section>   
<script>  
$(function(){  
//下方for循环  
    var size=$(".img li").size()  
    for(var i=1; i<=size; i++){  
        var li="<li>"+i+"</li>";  
        $(".num").append(li)  
        }  
/*size  获取当前元素个数*/  
     
//手动控制轮播  
$(".img li").eq(0).show()  
$(".num li").eq(0).addClass('active-1')  
/*mouseover  可以改成点击事件  click*/  
$(".num li").mouseover(function(){  
$(this).addClass('active-1').siblings('li').removeClass('active-1')  
var index=$(this).index()  /*index  当前元素的意思索引值*/  
i=index; //i值和自动轮播值是相同的  
$(".img li").eq(index).stop().fadeIn(/*淡入*/).siblings().stop().fadeOut(/*淡出*/)      /*eq 0开始*/  
    });  
      
//自动控制轮播  
 var i=0;  
 var t=setInterval(move,1500)   //定时器  
    //右  
    function move(){  
     i++;  
     if(i==size){i=0;}  
     $(".num li").eq(i).addClass('active').siblings('li').removeClass('active');  
     $(".img li").eq(i).fadeIn().siblings().fadeOut();  
     };  
     //左  
    function moveL(){  
     i--;  
     if(i==-1){i=size-1;}  
     $(".num li").eq(i).addClass('active').siblings('li').removeClass('active');  
     $(".img li").eq(i).fadeIn().siblings().fadeOut();  
     };   
//自动轮播鼠标经过移入和移除  
    $(".lump5").hover(function(){  
        clearInterval(t)  
        },function(){  
            t=setInterval(move,1500)  
            });  
              
//左右按钮  
    $(".lump5 .left").click(function(){  
        moveL()  
        })  
    $(".lump5 .right").click(function(){  
        move()  
        })  
});    
</script>  
</body>  
</html>  